<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="../node_modules/tesseract.js/dist/tesseract.min.js"></script>
</head>

<body>
    <input id="image-file" type="file" accept="image/png,image/jpeg,image/bmp,image/gif">
    <div id="barcode-result"></div>
    <div id="ocr-result"></div>
    <!-- Get a free trial license from https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx -->
    <script src="../node_modules/dynamsoft-javascript-barcode/dist/dbr.js"
        data-productKeys="t0068NQAAAEVstLIsgc9hWbA0o6jqlfcAR0BeZBLF0AhkB+7kOS63Oprq0nopsJtAeL9yNFv4U+uqp1VHtXrRTutFmod3R0g="></script>

    <script>
        let reader = null;

        document.getElementById('image-file').addEventListener('change', async function () {
            try {
                // Use Dynamsoft JavaScript Barcode Reader
                reader = reader || await Dynamsoft.BarcodeReader.createInstance();
                let barcode_results = [];
                let file = this.files[0];
                let results = await reader.decode(file);
                for (let result of results) {
                    barcode_results.push(result.barcodeText);
                }

                document.getElementById("barcode-result").innerText = 'Barcode result: ' + barcode_results.join('\n');

                // Use JavaScript OCR
                const { createWorker } = Tesseract;
                const worker = createWorker({
                workerPath: '../node_modules/tesseract.js/dist/worker.min.js',
                langPath: '../lang-data',
                corePath: '../node_modules/tesseract.js-core/tesseract-core.wasm.js',
                logger: m => console.log(m),
                });

                await worker.load();
                await worker.loadLanguage('eng');
                await worker.initialize('eng');
                await worker.setParameters({
                    tessedit_char_whitelist: '0123456789',
                });
                const { data: { text } } = await worker.recognize(file);
                document.getElementById("ocr-result").innerText = 'OCR result: ' + text;
                await worker.terminate();

                // Draw the input image to a canvas
                let img = new Image;
                img.onload = function () {
                    let canvas = document.createElement("canvas");
                    let old_canvas = document.querySelector('canvas');
                    if (old_canvas) {
                        old_canvas.parentNode.removeChild(old_canvas);
                    }
                    document.body.appendChild(canvas);
                    canvas.width = img.width;
                    canvas.height = img.height;

                    let ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0);
                }
                img.src = URL.createObjectURL(file);
            } catch (ex) {
                alert(ex.message);
                throw ex;
            }
        });
    </script>
</body>

</html>